<template>
    <div class="reviewprocess">
        <div v-if="!info" class="loading">
            <div v-if="!timeOut" style="margin-top: 50vw">
                <img :src="loadingImg" alt="">
                <p style="font-size: 18px;color:rgb(253, 163, 62);margin-top: 20px">加载中.....</p>
            </div>
            <div v-if="timeOut" style="font-size: 20px;margin-top: 50vw">
                <Icon type="refresh" style="color: dodgerblue;font-size: 40px"></Icon>
                <p>加载失败，请点击屏幕重新加载...</p>
            </div>
        </div>
        <div v-if="info"
             ref="el"
             @touchstart="touchStart($event)"
             @touchmove="touchMove($event)"
             @touchend="touchEnd($event)"
        >
            <img :src="info.processList[0].src" alt="" class="cover">
            <div class="container" ref="container" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)'}">
                <p class="title">{{info.title}}</p>
                <p style="font-size: 14px">{{info.like_count||1}}人喜欢·{{info.visit_count||1}}人浏览</p>
                <hr style="width: 80%;margin: 15px auto;color: #eee">
                <div class="author">
                    <img :src="info.portrait" class="portrait" alt="">
                    <p>{{info.author}}</p>
                    <star :targetId="info.author_id"></star>
                </div>
                <div class="division"></div>
                <ul class="toollist">
                    <li class="toolitem">
                        <p>所需工具</p>
                    </li>
                    <li class="toolitem" v-for="item in info.toolList" v-if="info.toolList">
                        <p>{{item.name}}</p>
                        <p>{{item.num}}</p>
                    </li>
                    <li class="toolitem" v-else>
                        <p>本教程不需要工具哦~</p>
                    </li>
                </ul>
                <div class="division"></div>
                <ul class="processlist">
                    <li class="processitem">
                        <p>步骤分解</p>
                    </li>
                    <li class="processitem" v-for="(item,index) in info.processList.slice(1)">
                        <p>步骤{{index+1}}</p>
                        <img :src="item.src" alt="">
                        <p>{{item.content}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import star from '@/components/star';
    import loading from './image/loading.gif';

    export default {
        name: 'reviewProcess',
        data() {
            return {
                top: 0,
                startX: 0,
                loadingImg: loading,
                info: undefined,
                timeOut: false,
                startScroll: 0
            };
        },
        components: {
            star
        },
        created() {
        },
        mounted() {
            if (!this.$route.query.id) {
                console.log(this.$route.query.id);
                this.$Modal.info({
                    content: '请从正确链接进入',
                    onOk: () => {
                        this.$router.push({name: 'index'});
                    }
                });
            } else {
                const processId = this.$route.query.id;
                this.$Api.getProcess(processId).then((res) => {
                    console.log(res);
                    if (res.ok) {
                        this.info = res.body.data;
                        console.log(this.info);
                    }
                }).catch((error) => {
                    this.$Modal.error({
                        content: error.body || '文章出错，请稍后再试',
                        onOk: () => {
                            this.$router.push({name: 'index'});
                        }
                    });
                });
            }
        },
        methods: {
            touchStart(e) {
                this.startY = e.targetTouches[0].pageY;
                this.startX = e.targetTouches[0].pageX;
                this.startScroll = this.$refs.el.scrollTop || 0;
            },
            touchMove(e) {
                const diff = e.targetTouches[0].pageY - this.startY - this.startScroll;
                this.top = (diff ** 0.7);
                if (this.top > 100) {
                    this.top = 100;
                }
            },
            touchEnd() {
                this.top = 0;
            }
        }
    };
</script>

<style lang="scss">
    .reviewprocess {
        overflow: scroll;
        .cover {
            width: 100vw;
            min-height: 200px;
            margin: 0;
            padding: 0;
            z-index: -200;
        }
        .container {
            position: absolute;
            top: 30vw;
            width: 100vw;
            background: #fff;
            z-index: 999;
            .title {
                font-size: 28px;
                margin: 20px auto 10px;
            }
            .author {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: left;
                padding: 10px 0;
                img {
                    margin: auto 5vw ;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
                p {
                    height: 50px;
                    font-size: 17px;
                    line-height: 50px;
                    margin-right: 5vw;
                }
            }
            .toollist {
                padding: 5vw;
                .toolitem {
                    display: flex;
                    justify-content: space-around;
                    border-bottom: 1px solid #aaa;
                    p {
                        font-size: 13px;
                        padding: 10px;
                    }
                }
            }
            .processlist {
                padding: 20px;
                .processitem {
                    p {
                        text-align: left;
                        font-size: 15px;
                        line-height: 30px;
                        margin: 10px 0 15px;
                    }
                    img {
                        width: 100%;
                    }
                    border-bottom: 1px solid #aaa;
                }
            }
        }
        .division {
            width: 100%;
            height: 10px;
            background: whitesmoke;
        }
    }
</style>
